<template>
    <div class="diff">
        <div class="diff-top" v-if="playing">
            <div>
                <el-button v-if="playing" @click="pass" type="danger">跳过</el-button>
                <el-button v-if="playing" @click="restart">重置</el-button>
            </div>
            <div>第: {{ step + 1 }} 关</div>
            <div>积分: {{ score }}</div>
            <div v-if="interval != null">倒计时: {{ timeLeft }}</div>
            <!-- <div>答案：{{ nums }}</div> -->
        </div>
        <div class="diff-list" v-if="playing">
            <div v-for="x in 64" @click="selectDiff(x)">
                <span v-if="x == nums[step]">{{ diff }}</span>
                <span v-else>{{ normal }}</span>
            </div>
        </div>
        <div v-else class="nogame">
            <template v-if="firstPlay">
                <div>欢迎来到找不同！</div>
            </template>
            <template v-else>
                <div>游戏结束！</div>
                <div>你的得分是：{{ score }}</div>
            </template>
            <el-button @click="start" type="success">开始</el-button>
        </div>
    </div>
</template>
<script setup>
import element  from '@/utils/element'
import { onMounted, ref } from 'vue'
const list = ref([
    '采采',
    '姬姫',
    '壸壶',
    '垚壵',
    '妹妺',
    '币帀'
])
const step = ref(-1)
const nums = ref([])
const score = ref(0)
const normal = ref('')
const diff = ref('')
const playing = ref(false)
const timeLeft = ref(180)
let interval = null
const firstPlay = ref(true)

onMounted(() => {
    firstPlay.value = true
})
function setAllRandom() {
    let arr = []
    for (let i = 0; i < list.value.length; i++) {
        arr.push(parseInt(Math.random(0, 64) * 65))
    }
    nums.value = arr
}

function countdown() {
    interval = setInterval(() => {
        if (timeLeft.value > 0) {
            timeLeft.value--;
        } else {
            clearInterval(interval);
            nextGame()
            // 倒计时结束后的操作
        }
    }, 1000); // 每隔1000毫秒（1秒）更新一次
}

function start() {
    if (playing.value) {
        element.error('游戏已经开始了！！')
    } else {
        playing.value = true
        score.value = 0
        nextGame()
        setAllRandom()
        countdown()
        list.value = shuffle(list.value)
        firstPlay.value = false
    }
}

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        // 生成一个0到i之间的随机整数
        const j = Math.floor(Math.random() * (i + 1));

        // 交换array[i]和array[j]
        [array[i], array[j]] = [array[j], array[i]];
    }

    return array;
}

function nextGame() {
    step.value += 1
    timeLeft.value = 180
    if (step.value < list.value.length) {
        const arr = list.value[step.value].split('')
        normal.value = arr[0]
        diff.value = arr[1]
    } else {
        element.error('挑战结束！')
        playing.value = false
        step.value = -1
    }
}

function selectDiff(x) {
    if (playing) {
        if (x == nums.value[step.value]) {
            element.success('选择成功')
            score.value += timeLeft.value
            nextGame()
        } else {
            element.error('选择失败')
        }
    }
}

function pass() {
    if (step.value < list.value.length - 1) {
        score.value += 0
        nextGame()
    } else {
        element.error('游戏结束！！')
        playing.value = false
        step.value = -1
        clearInterval(interval);
        interval = null
    }
}

function restart() {
    step.value = 0
    score.value = 0
    element.error('游戏已重置！！！')
    playing.value = false
}

</script>
<style scoped lang="scss">
.diff-list {
    width: 641px;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;

    >div {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        font-size: 32px;
    }
}

.diff-top {
    display: flex;
    margin: 10px;

    >div {
        margin-right: 20px;
    }
}

.nogame {
    width: 600px;
    text-align: center;

    >div {
        margin: 20px;
    }
}
</style>
